<template>
  <view class="cover-img" :style="{ height: windowHeight + 'px' }">
    <camera mode="normal" device-position="back" flash="off" :style="{ height: cameraHeight + 'px' }">
      <cover-view class="controls" style="width: 100%; height: 100%">
        <cover-image class="icon-w569-h828" src="/static/images/rxx.png" />
      </cover-view>
    </camera>
    <view class="bottom font-36-fff">
      <view class="wrap">
        <view class="back" @click="back">取消</view>
        <view @click="takePhoto">
          <image class="icon-w131-h131" src="/static/images/pz.png"> </image>
        </view>
        <view @click="chooseImage"> 相册 </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      cameraContext: {},
      cameraHeight: '',
    };
  },
  created() {
    let systemInfo = uni.getSystemInfoSync();
    this.windowHeight = systemInfo.windowHeight;
    this.cameraHeight = systemInfo.windowHeight - 80;
    if (uni.createCameraContext) {
      this.cameraContext = uni.createCameraContext();
    } else {
      uni.showModal({
        title: '提示',
        content: '当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。',
      });
    }
  },
  methods: {
    back() {
      this.$emit('show', false);
    },
    // 拍照
    takePhoto() {
      this.cameraContext.takePhoto({
        quality: 'normal',
        success: (res) => {
          this.$emit('photo', res.tempImagePath);
          this.$emit('show', false);
        },
        fail: (err) => {
          uni.showToast({
            title: '拍照失败，请检查系统是否授权',
            icon: 'none',
            duration: 1200,
          });
        },
      });
    },
    // 从相册选取
    chooseImage() {
      uni.chooseImage({
        count: 1,
        sizeType: ['original', 'compressed'],
        sourceType: ['album'],
        success: (res) => {
          this.$emit('photo', res.tempFilePaths[0]);
          this.$emit('show');
        },
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.controls {
  position: relative;
  display: flex;
  // align-items: center;
  justify-content: center;
  .icon-w569-h828 {
    margin-top: 200rpx;
    width: 450rpx;
    height: 450rpx;
  }
}

.bottom {
  width: 100%;
  background-color: #000;
  .icon-w131-h131 {
    width: 100rpx;
    height: 100rpx;
  }
  .wrap {
    color: #fefefe;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 80px;
    padding: 0 73rpx;
  }
}
</style>
